<template>
  <div class="app-container">
    <el-upload action="#" :http-request="http_request"
      ><el-button size="small" type="primary">点击上传</el-button></el-upload
    >
    <img width="200px" v-if="imageUrl" :src="imageUrl" class="avatar" />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      imageUrl: '',
      fileBase64: ''
    }
  },
  methods: {
    http_request (data) {
      this.imageUrl = URL.createObjectURL(data.file)
      this.getBase64(data.file).then(resBase64 => {
        this.fileBase64 = resBase64.split(',')[1]　　//直接拿到base64信息
      })
      axios.post('http://192.168.3.29:675/upload', { file: this.getBase64(data.file) })
    },
    getBase64 (file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        let fileResult = ""
        reader.readAsDataURL(file)
        //开始转
        reader.onload = function () {
          fileResult = reader.result
        }
        //转 失败
        reader.onerror = function (error) {
          reject(error)
        }
        //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult)
        }
      })
    },
  },
}
</script>

<style>
</style>